import { Button, Card, Input, message, Modal, Table } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import testData from "../resourceManage/testData";
import CaseModal from "./caseModal";
import { chargingDelete, chargingList, chargingStatus } from "@/services/chargingManage";
import moment from "moment";

class ChargingCase extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      search:"",
      loading:false,
      list:[],
      total:0,
      selectedRowKeys:[]
    }
  }

  componentDidMount(){
    this.getList()
  }
  
  getList = () => {
    this.setState({loading:true},async () => {
      const { current,size,search } = this.state;
      const res = await chargingList({current,size,search })
      this.setState({
        loading:false,
        list:res.records,
        total:res.total,
        selectedRowKeys:[]
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getList()
    })
  }

  openModal = id => {
    this.CaseModal.initModal(id)
  }

  removeConfirm = id => {
    Modal.confirm({
      title:formatMessage({ id: 'chargingCase.index.deleteConfirm' }),
      okText:formatMessage({ id: 'common.confirm' }),
      cancelText:formatMessage({ id: 'common.cancel' }),
      okType:"danger",
      onOk:() => {
        this.doRemove(id)
      }
    })
  }

  doRemove = async id => {
    const res = await chargingDelete({id})
    if(res.code === -1){return false}
    message.info(res.message)
    this.getList()
  }

  onSelectChange = selectedRowKeys => {
    this.setState({selectedRowKeys})
  }

  changeStatus = async (field,status) => {
    const res = await chargingStatus({
      ids:this.state.selectedRowKeys,
      [field]:status
    })
    message.info(res.message)
    this.getList()
  }

  render(){
    const { current,size,search,loading,list,total,selectedRowKeys } = this.state;
    const columns = [
      {
        title:formatMessage({ id: 'chargingCase.index.name' }),
        dataIndex:"name",
        width:200
      },
      {
        title:formatMessage({ id: 'chargingCase.index.suggestion' }),
        dataIndex:"suggestionId",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingCase.index.signParty' }),
        dataIndex:"signName",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingCase.index.signPackage' }),
        dataIndex:"packageName",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingCase.index.paymentTerms' }),
        dataIndex:"paymentProvision",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingCase.index.paymentCycle' }),
        dataIndex:"periodType",
        width:100,
        render:type => {
          return type == 0 ? '月' : type == 1 ? '年' : ''
        }
      },
      {
        title:formatMessage({ id: 'chargingCase.index.discountPlan' }),
        dataIndex:"discountPreview",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingCase.index.signDate' }),
        dataIndex:"signDate",
        width:120,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD") : ''
        }
      },
      {
        title:formatMessage({ id: 'chargingCase.index.signAmount' }),
        dataIndex:"signPrice",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingCase.index.lockStatus' }),
        dataIndex:"isLock",
        width:100,
        render:type => {
          return type == 0 ? formatMessage({ id: 'chargingCase.index.unlockStatus' }) : type == 1 ? formatMessage({ id: 'chargingCase.index.lockStatus' }) : ''


        }
      },
      {
        title:formatMessage({ id: 'chargingCase.index.usageStatus' }),
        dataIndex:"status",
        width:100,
        render:type => {
          return type == 0 ? formatMessage({ id: 'chargingCase.index.disableStatus' }) : type == 1 ? formatMessage({ id: 'chargingCase.index.enableStatus' }) : ''
        }
      },
      {
        title:formatMessage({ id: 'chargingCase.index.consultant' }),
        dataIndex:"paidConsultant",
        width:100
      },
      {
        title:formatMessage({ id: 'common.operation' }),
        width:170,
        fixed:"right",
        render:(text,row) =>  {
          return (
            <span>
              <Button type={row.isLock ? '' : "primary"} size="small" onClick={() => this.openModal(row)} style={{marginRight:8}}>{row.isLock ? formatMessage({ id: 'common.view' }) : formatMessage({ id: 'common.edit' })}</Button>
              <Button type="danger" size="small" onClick={() => this.removeConfirm(row.id)}>{formatMessage({ id: 'common.delete' })}</Button>
            </span>
          )
        }
      }
    ]

    return (
      <Card bordered={false} style={{minHeight:"100%"}}>
        <div className="topOptionBox">
          <Input.Search placeholder={formatMessage({ id: 'chargingCase.index.searchPlan' })} style={{width:200}} value={search} onChange={e => this.setState({search:e.target.value})} onSearch={() => this.doSearch(1,size)} />
          <div>
            <Button type="primary" onClick={() => this.openModal()} style={{marginRight:8}}>{formatMessage({ id: 'chargingCase.index.newPlan' })}</Button>
            <Button style={{marginRight:8}} disabled={selectedRowKeys.length == 0} onClick={() => this.changeStatus('isLock',0)}>{formatMessage({ id: 'chargingCase.index.unlockPlan' })}</Button>
            <Button style={{marginRight:8}} disabled={selectedRowKeys.length == 0} onClick={() => this.changeStatus('isLock',1)}>{formatMessage({ id: 'chargingCase.index.lockPlan' })}</Button>
            <Button style={{marginRight:8}} disabled={selectedRowKeys.length == 0} onClick={() => this.changeStatus('status',0)}>{formatMessage({ id: 'chargingCase.index.disablePlan' })}</Button>
            <Button disabled={selectedRowKeys.length == 0} onClick={() => this.changeStatus('status',1)}>{formatMessage({ id: 'chargingCase.index.enablePlan' })}</Button>
          </div>
        </div>

        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          scroll={{x:"auto"}}
          pagination={{
            current,
            pageSize:size,
            showQuickJumper:true,
            onChange:this.doSearch,
            total
          }}
          rowSelection={{
            selectedRowKeys,
            onChange: this.onSelectChange
          }}
        />

        <CaseModal onRef={ref => this.CaseModal = ref} refreshList={this.getList} />
      </Card>
    )
  }
}

export default ChargingCase